<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>商业经管</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="swiper-bundle.min.css" />
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
  <!-- Demo styles -->
  <style>
html, body {
  position: relative;
  width: 950px;
  height: 450px;
}
#main {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

 #sw-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
} 

 #sw-slide ul li a img {
    display: block;
    max-width:115px;
    max-height: 160px;
    margin-top: -100px;
  }

    #main {
     background: #eee;
    }

    #sw {
      text-align: left;
      /* width: 700px; */
      height: 500px;
      margin: 20px 0;
      margin: auto;
 
   }
   *{
        margin: 0;
        padding: 0;
    }
    #sw-slide ul {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    #sw-slide li {
        width: 25%;
        height: 100px;
         margin-top: 100px;
         margin-right: 0; 
         list-style: none;
    }

      .list:not(:nth-child(3n)) {
        margin-right: 0; 
    }  
         
    #sw-slide ul{
      width: 700px;
      padding-left: 80px;
    }
    #sw-slide li{
    
      width: 150px;
    }

    #dao{
      width: 950px;
      border-bottom: 1px solid black;
      /* margin: auto; */
    }
   #week{
      position: relative;
      top: 34px;
    }
    /* .swiper-wrapper{
      all: initial;
      text-align: left;
      width: 750px;
    } */
    #mu{
   position: relative;
   left: 100px;
   top: 12px;
    color: #9b9b9b;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    cursor: pointer;
    margin-left: 6px;
    }
    #emm.active{
       color: #111;
       cursor: default;
    }
    #ooo{
      position: relative;
      left: 695px;
      bottom: 13px;
      color: #37a;
      font: 16px Arial,Helvetica,sans-serif;
    }
    #shu{
      all: initial;
      width: 150px;
      display: block;
      margin-left: 0;
      font-size: 14px;
      margin-bottom: 6px;
    }
    #quan a{
      /* all: initial; */
      text-decoration: none;
      /* font-weight: bold; */
      color: black;
    }
    #emm a{
      text-decoration: none;
      color: #333;
    }
    #biao a{
      text-decoration: none;
    }
    #zou{
      all: initial;
      font-size: 12px;
    }
    #ooo a{
      text-decoration: none;
    }
    #mu a:hover{
      color:rgb(255, 132, 0);
    }
  </style>
</head>

<body id="main">
  <div class="section ">
    <div class="hd" id="dao">
       <h2 class="h2" id="week"> 每周新书 </h2> 
        <div class="tags" id="mu">
            <span class="item-all" id="quan">
              <a href="newbook.html" >全部</a>
            </span>
            <span class="item  " id="emm">
              <a href="wenxue.html">文学</a>
            </span>
            <span class="item " id="emm">
              <a href="xiaoshuo.html">小说</a>
            </span>
            <span class="item " id="emm">
              <a href="lishiwenhua.html">历史文化</a>
            </span>
            <span class="item " id="emm">
              <a href="shehuijishi.html">社会纪实</a>
            </span>
            <span class="item " id="emm">
              <a href="kexuexinzhi.html">科学新知</a>
            </span>
            <span class="item " id="emm">
              <a href="yishusheji.html">艺术设计</a>
            </span>
            <span class="item " id="emm">
              <a href="jingyingguangli.html">商业经管</a>
            </span>
            <span class="item " id="emm">
              <a href="huibenmanhua.html">绘本漫画</a>
            </span>
        </div>
        <span class="link-more" id="ooo">
          <a href="more.html" target="_blank">更多»</a>
        </span>
    </div>
  <!-- Swiper轮播 -->
  <div class="swiper mySwiper" id="sw">
    <div class="swiper-wrapper">
   <div class="swiper-slide" id="sw-slide">
    <ul>
     <li>
       <div class="tupian">
         <a href="demo17.html" title="百年孤独"><img src="images/百年孤独.png" alt="百年孤独"></a>
       </div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo17.html" title="百年孤独">百年孤独</a>
         </div>
         <div class="author" id="zou">加西亚·马尔克斯</div>
       </div>
     </li>
     <li>
       <div class="tupian"><a href="demo18.html" title="活着">
         <img src="images/活着.png" alt="活着"></a></div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo18.html" title="活着">活着</a>
         </div>
         <div class="author" id="zou">余华</div>
       </div>
     </li>
     <li>
       <div class="tupian"><a href="demo19.html" title="我与地坛">
         <img src="images/我与地坛.png" alt="我与地坛"></a></div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo19.html" title="我与地坛">我与地坛</a>
         </div>
         <div class="author" id="zou">史铁生</div>
       </div>
     </li>
     <li>
       <div class="tupian"><a href="demo20.html" title="呼啸山庄">
         <img src="images/呼啸山庄.png" alt="呼啸山庄"></a></div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo20.html" title="呼啸山庄">呼啸山庄</a>
         </div>
         <div class="author" id="zou">(英) 艾米莉·勃朗特</div>
       </div>
     </li>
     <li>
       <div class="tupian"><a href="demo21.html" title="1984">
         <img src="images/1984.png" alt="1984"></a></div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo21.html" title="1984">1984</a>
         </div>
         <div class="author" id="zou"> [英] 乔治·奥威尔</div>
       </div>
     </li>
     <li>
       <div class="tupian"><a href="demo22.html" title="局外人">
         <img src="images/局外人.png" alt="局外人"></a></div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo22.html" title="局外人">局外人</a>
         </div>
         <div class="author" id="zou"> [法] 阿尔贝·加缪</div>
       </div>
     </li>
     <li>
       <div class="tupian"><a href="demo23.html" title="月亮与六便士">
         <img src="images/月亮与六便士.png" alt="月亮与六便士"></a></div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo23.html" title="月亮与六便士">月亮与六便士</a>
         </div>
         <div class="author" id="zou">[英] 威廉·萨默塞特·毛姆</div>
       </div>
     </li>
     <li>
       <div class="tupian"><a href="demo24.html" title="双城记">
         <img src="images/双城记.png" alt="双城记"></a></div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo24.html" title="双城记">双城记</a>
         </div>
         <div class="author" id="zou">[英] 查尔斯·狄更斯</div>
       </div>
     </li>
 </ul>
</div>
<div class="swiper-slide" id="sw-slide">
  <ul>
   <li>
     <div class="tupian">
       <a href="demo25.html" title="老人与海"><img src="images/老人与海.png" alt="老人与海"></a>
     </div>
     <div class="info" id="shu">
       <div class="title" id="biao">
         <a href="demo25.html" title="老人与海">老人与海</a>
       </div>
       <div class="author" id="zou">[美] 欧内斯特·海明威</div>
     </div>
   </li>
   <li>
     <div class="tupian"><a href="demo26.html" title="傲慢与偏见">
       <img src="images/傲慢与偏见.png" alt="傲慢与偏见"></a></div>
     <div class="info" id="shu">
       <div class="title" id="biao">
         <a href="demo26.html" title="傲慢与偏见">傲慢与偏见</a>
       </div>
       <div class="author" id="zou">简•奥斯丁</div>
     </div>
   </li>
   <li>
     <div class="tupian"><a href="demo27.html" title="金瓶梅">
       <img src="images/金瓶梅.png" alt="金瓶梅"></a></div>
     <div class="info" id="shu">
       <div class="title" id="biao">
         <a href="demo27.html" title="金瓶梅">金瓶梅</a>
       </div>
       <div class="author" id="zou"> 兰陵笑笑生</div>
     </div>
   </li>
   <li>
     <div class="tupian"><a href="demo28.html" title="红与黑">
       <img src="images/红与黑.png" alt="红与黑"></a></div>
     <div class="info" id="shu">
       <div class="title" id="biao">
         <a href="demo28.html" title="红与黑">红与黑</a>
       </div>
       <div class="author" id="zou">[法] 司汤达</div>
     </div>
   </li>
   <li>
     <div class="tupian"><a href="demo29.html" title="欧也妮·葛朗台">
       <img src="images/欧也妮·葛朗台.png" alt="欧也妮·葛朗台"></a></div>
     <div class="info" id="shu">
       <div class="title" id="biao">
         <a href="demo29.html" title="欧也妮·葛朗台">欧也妮·葛朗台</a>
       </div>
       <div class="author" id="zou">[法]巴尔扎克</div>
     </div>
   </li>
   <li>
     <div class="tupian"><a href="demo30.html" title="相信">
       <img src="images/相信.png" alt="相信"></a></div>
     <div class="info" id="shu">
       <div class="title" id="biao">
         <a href="demo30.html" title="相信">相信</a>
       </div>
       <div class="author" id="zou">蔡磊</div>
     </div>
   </li>
   <li>
     <div class="tupian"><a href="demo31.html" title="你当像鸟飞往你的山">
       <img src="images/你当像鸟飞往你的山.png" alt="你当像鸟飞往你的山"></a></div>
     <div class="info" id="shu">
       <div class="title" id="biao">
         <a href="demo31.html" title="你当像鸟飞往你的山">你当像鸟飞往你的山</a>
       </div>
       <div class="author" id="zou">塔拉·韦斯特弗</div>
     </div>
   </li>
   <li>
     <div class="tupian"><a href="demo32.html" title="黄粱一梦">
       <img src="images/黄粱一梦.png" alt="黄粱一梦"></a></div>
     <div class="info" id="shu">
       <div class="title" id="biao">
         <a href="demo32.html" title="黄粱一梦">黄粱一梦</a>
       </div>
       <div class="author" id="zou"> 不明眼</div>
     </div>
   </li>
</ul>
</div>
<div class="swiper-slide" id="sw-slide">
  <ul>
   <li>
     <div class="tupian">
       <a href="demo33.html" title="强风吹拂"><img src="images/强风吹拂.png" alt="强风吹拂"></a>
     </div>
     <div class="info" id="shu">
       <div class="title" id="biao">
         <a href="demo33.html" title="强风吹拂">强风吹拂</a>
       </div>
       <div class="author" id="zou"> 三浦紫苑</div>
     </div>
   </li>
   <li>
     <div class="tupian"><a href="demo34.html" title="钝感力">
       <img src="images/钝感力.png" alt="钝感力"></a></div>
     <div class="info" id="shu">
       <div class="title" id="biao">
         <a href="demo34.html" title="钝感力">钝感力</a>
       </div>
       <div class="author" id="zou">[日] 渡边淳一</div>
     </div>
   </li>
   <li>
     <div class="tupian"><a href="demo35.html" title="旧物的灵魂">
       <img src="images/旧物的灵魂.png" alt="旧物的灵魂"></a></div>
     <div class="info" id="shu">
       <div class="title" id="biao">
         <a href="demo35.html" title="旧物的灵魂">旧物的灵魂</a>
       </div>
       <div class="author" id="zou"> 郭婷</div>
     </div>
   </li>
   <li>
     <div class="tupian"><a href="demo36.html" title="续窗边的小豆豆">
       <img src="images/续窗边的小豆豆.png" alt="续窗边的小豆豆"></a></div>
     <div class="info" id="shu">
       <div class="title" id="biao">
         <a href="demo36.html" title="续窗边的小豆豆">续窗边的小豆豆</a>
       </div>
       <div class="author" id="zou"> [日] 黑柳彻子</div>
     </div>
   </li>
   <li>
     <div class="tupian"><a href="demo37.html" title="赞美闲散">
       <img src="images/赞美闲散.png" alt="赞美闲散"></a></div>
     <div class="info" id="shu">
       <div class="title" id="biao">
         <a href="demo37.html" title="赞美闲散">赞美闲散</a>
       </div>
       <div class="author" id="zou">[英]伯特兰 ·罗素</div>
     </div>
   </li>
   <li>
     <div class="tupian"><a href="demo38.html" title="一次告别">
       <img src="images/一次告别.png" alt="一次告别"></a></div>
     <div class="info" id="shu">
       <div class="title" id="biao">
         <a href="demo38.html" title="一次告别">一次告别</a>
       </div>
       <div class="author" id="zou">罗德里戈·加西亚</div>
     </div>
   </li>
   <li>
     <div class="tupian"><a href="demo39.html" title="古道">
       <img src="images/古道.png" alt="古道"></a></div>
     <div class="info" id="shu">
       <div class="title" id="biao">
         <a href="demo39.html" title="古道">古道</a>
       </div>
       <div class="author" id="zou">[英] 罗伯特·麦克法伦</div>
     </div>
   </li>
   <li>
     <div class="tupian"><a href="demo40.html" title="信任">
       <img src="images/信任.png" alt="信任"></a></div>
     <div class="info" id="shu">
       <div class="title" id="biao">
         <a href="demo40.html" title="信任">信任</a>
       </div>
       <div class="author" id="zou">[美] 埃尔南·迪亚斯</div>
     </div>
   </li>
</ul>
</div>
<div class="swiper-slide" id="sw-slide">
  <ul>
   <li>
     <div class="tupian">
       <a href="demo41.html" title="为你着迷"><img src="images/为你着迷.png" alt="为你着迷"></a>
     </div>
     <div class="info" id="shu">
       <div class="title" id="biao">
         <a href="demo41.html" title="为你着迷">为你着迷</a>
       </div>
       <div class="author" id="zou">(日)和山山</div>
     </div>
   </li>
   <li>
     <div class="tupian"><a href="demo42.html" title="内陆之行">
       <img src="images/内陆之行.png" alt="内陆之行"></a></div>
     <div class="info" id="shu">
       <div class="title" id="biao">
         <a href="demo42.html" title="内陆之行">内陆之行</a>
       </div>
       <div class="author" id="zou">[奥] 彼得·汉德克</div>
     </div>
   </li>
   <li>
     <div class="tupian"><a href="demo43.html" title="食南之徒">
       <img src="images/食南之徒.png" alt="食南之徒"></a></div>
     <div class="info" id="shu">
       <div class="title" id="biao">
         <a href="demo43.html" title="食南之徒">食南之徒</a>
       </div>
       <div class="author" id="zou">马伯庸</div>
     </div>
   </li>
   <li>
     <div class="tupian"><a href="demo44.html" title="阿勒泰的角落">
       <img src="images/阿勒泰的角落.png" alt="阿勒泰的角落"></a></div>
     <div class="info" id="shu">
       <div class="title" id="biao">
         <a href="demo44.html" title="阿勒泰的角落">阿勒泰的角落</a>
       </div>
       <div class="author" id="zou"> 李娟</div>
     </div>
   </li>
   <li>
     <div class="tupian"><a href="demo45.html" title="我们八月见">
       <img src="images/我们八月见.png" alt="我们八月见"></a></div>
     <div class="info" id="shu">
       <div class="title" id="biao">
         <a href="demo45.html" title="我们八月见">我们八月见</a>
       </div>
       <div class="author" id="zou">加西亚·马尔克斯</div>
     </div>
   </li>
   <li>
     <div class="tupian"><a href="demo46.html" title="唯余细节">
       <img src="images/唯余细节.png" alt="唯余细节"></a></div>
     <div class="info" id="shu">
       <div class="title" id="biao">
         <a href="demo46.html" title="唯余细节">唯余细节</a>
       </div>
       <div class="author" id="zou"> [瑞典] 伊娅·根伯格</div>
     </div>
   </li>
   <li>
     <div class="tupian"><a href="demo47.html" title="鳄鱼">
       <img src="images/鳄鱼.png" alt="鳄鱼"></a></div>
     <div class="info" id="shu">
       <div class="title" id="biao">
         <a href="demo47.html" title="鳄鱼">鳄鱼</a>
       </div>
       <div class="author" id="zou"> 莫言</div>
     </div>
   </li>
   <li>
     <div class="tupian"><a href="demo48.html" title="绿灯">
       <img src="images/绿灯.png" alt="绿灯"></a></div>
     <div class="info" id="shu">
       <div class="title" id="biao">
         <a href="demo48.html" title="绿灯">绿灯</a>
       </div>
       <div class="author" id="zou">[美]马修·麦康纳</div>
     </div>
   </li>
</ul>
</div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
  </div>
   
    <script src="swiper-bundle.min.js"></script>  
  <!-- Initialize Swiper 初始化轮播图-->
  <script>
    var swiper = new Swiper(".mySwiper", {
      spaceBetween: 30,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
 </script>
</body>
</html>


  